<!DOCTYPE html>
<html>
  <head>
  	<meta name="description" content="Beer Expert for Google I/O 2012 Demo">
    <meta name="author" content="Ido Green">

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <link rel="stylesheet" href="style/beer.css"/>

    <!-- maximum scale added to stop zoom on select controls -->
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <!-- TODO move it down to the end of the page -->
    
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
     
    <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyCcCjTBro5c0d5g3NBXJRWX6opJZtkZ0f0&sensor=true"></script>
    <script src="js/map.js"></script>
   
  </head>
  <body>  
  	<div data-role="page" id="map-details" data-add-back-btn="true">
      <div data-role="header" data-theme="b">
        <h1>Breweries Around</h1>
      </div>
      <div data-role="content" id="drink-details-content">
          <article>
			<h2>
			<span id="status">Let's see where are you...</span>
			</h2>
		</article>

		 <div id="listPoints">
	        <ul id="ulPoints" data-role="listview" data-inset="true" data-theme="c" data-dividertheme="b">
	            <img src="http://code.jquery.com/mobile/1.1.0/images/ajax-loader.gif"/>
	        </ul>
	    </div>
      </div>
    </div>
	
  </body>
</html>